<template>
    <div class="tmpl">
        <!--使用subimgslider.vue组件实现轮播0000000000000000000000000000000000000000000000-->
        <subImgSlider :imagelist="list"></subImgSlider>

        <!--利用mui中的9宫格实现系统的导航按钮-->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/news/newsList">
                        <span class="mui-icon icon-news"></span>
                        <div class="mui-media-body">新闻资讯</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/photo/photoList">
                        <span class="mui-icon icon-photo"></span>
                        <div class="mui-media-body">图片分享</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/goods/goodsList">
                        <span class="mui-icon icon-goods"></span>
                        <div class="mui-media-body">商品购买</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon icon-feedback"></span>
                        <div class="mui-media-body">留言反馈</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon icon-video"></span>
                        <div class="mui-media-body">视频专区</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon icon-callme"></span>
                        <div class="mui-media-body">联系我们</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    //1.0导入 subimgslider.vue组件
    import subImgSlider from '../SubComp/subImgSlider.vue';//00000000000000000000000000000000000000000000000000000000000
    import common from '../../kits/common.js'
    export default{
        data(){
            return{
                //使用死数据测试
//                list:[{ url:'http://news.163.com/17/0504/13/CJJIGS830001899P.html',
//                        img:'http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/9e1c6f86f8ce4871a155d7091b3b8aa120170504134111.jpeg_600x250x1x85.jpg'},
//                    { url:'http://caozhi.news.163.com/17/0504/12/CJJHDPD1000181TI.html',
//                        img:'http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/019f65c5d7244d9ca9e49011d9b4092320170504130652.png_600x250x1x85.jpg'},
//                    { url:'http://zajia.news.163.com/17/0504/10/CJJ9E2D2000181TJ.html',
//                        img:'http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/d5355628121b446a8807197cb4762a3120170504104207.png_600x250x1x85.jpg'},
//                    { url:'http://news.163.com/17/0504/00/CJI6KI1O0001885B.html',
//                        img:'http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/bc7165f065c8454781bfff56549cd1e820170504011812.jpeg_600x250x1x85.jpg'}]
                //api从服务器请求新数据
                list:[]
            }
        },
        created(){
            //表示，vue组件创建完毕以后，并且已经将data中和methods中的所有属性方法初始化完毕

            //这里调用ajax请求********************************************
            this.getlunbo();
        },
        methods:{
            getlunbo(){
                var url  = common.apihost + '/api/getlunbo';
                this.$http.get(url).then(res=>{
                    //成功则将res.body.message中的数据赋值给this.list
                    this.list = res.body.message;
                },res=>{
                    console.log('轮播图获取失败');
                });
            }
        },
        components:{
            subImgSlider //使用导入的组件000000000000000000000000000000000000000000000000000000000000000
        }
    }
</script>
<!--scoped通常是指style中用的，表示这个标签中的样式只在当前组件中生效**********************************-->
<style scoped>

    /*复写组件自带样式去除背景边框*/
    .mui-content{
        background-color: #fff;
    }
    .mui-grid-view.mui-grid-9{
        background: #fff;
        border-top:none;
        border-left: none;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right:none;
        border-bottom: none;
    }
    .mui-icon{
        width:50px;
        height: 50px;
    }

    /*定义9宫格中的图片样式*/

    .icon-news{
        background-image: url("../../../statics/images/menu10.png");
        background-repeat: round;
    }
    .icon-photo{
        background-image: url("../../../statics/images/menu3.png");
        background-repeat: round;
    }
    .icon-goods{
        background-image: url("../../../statics/images/menu4.png");
        background-repeat: round;
    }
    .icon-video{
        background-image: url("../../../statics/images/menu5.png");
        background-repeat: round;
    }
    .icon-feedback{
        background-image: url("../../../statics/images/menu6.png");
        background-repeat: round;
    }
    .icon-callme{
        background-image: url("../../../statics/images/menu9.png");
        background-repeat: round;
    }
    
</style>